<template>
  <li class="NoteItem">
    <div
      class="image"
      :style="{
        height: height + 'vw',
      }"
    >
      <img :src="image" alt="" />
    </div>
    <div class="text">
      <h1>{{ msg }}</h1>
    </div>
    <div class="user">
      <div class="uimg">
        <img :src="uimg" />
      </div>
      <div class="uname">
        <h3>{{ uname }}</h3>
      </div>
    </div>
  </li>
</template>

<script>
// import Note from '@/components/HelloWorld.vue'

export default {
  props: ["item"],
  computed: {
    height() {
      return this.item.activity
        ? (this.item.activity.image_h / this.item.activity.image_w) * 48
        : (this.item.note.image_h / this.item.note.image_w) * 48;
    },
    image() {
      return this.item.activity
        ? this.item.activity.image
        : this.item.note.image_u;
    },
    msg() {
      return this.item.activity
        ? this.item.activity.name
        : this.item.note.title;
    },
    uimg() {
      return this.item.activity
        ? this.item.activity.author.p
        : this.item.note.author.p;
    },
    uname() {
      return this.item.activity
        ? this.item.activity.author.n
        : this.item.note.author.n;
    },
  },
  mounted: function () {
    // console.log(this.$refs.item.offsetHeight);
    this.$emit("get-height");
  },
};
</script>

<style lang="less" scoped>
.NoteItem {
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 5px;
  .image {
    background-color: #ccc;
    img {
      vertical-align: middle;
    }
  }
  .text {
    h1 {
      font-size: 12px;
      margin: 5px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: (2);
    }
  }
  .user {
    display: flex;
    padding: 5px;
    .uimg {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      overflow: hidden;
    }
    .uname {
      font-size: 12px;
      transform-origin: left;
      transform: scale(0.8);
      color: #aaa;
      margin-left: 3px;
    }
  }
}
</style>